<template>
    <div class="test-page">
        {{msg}}
        <el-button type="primary">{{msg}}</el-button>
        <router-link to="/pl/goods">goods</router-link>
    </div>
</template>

<script>

    export default {
        name: "test",
        data() {
            return {
                msg: 'test-page'
            }
        },

        created() {
            // async await 的是使用  await接收一个promise对象
            // this.moreAwaitFns();
        },

        methods: {
            async moreAwaitFns() {
                console.time("global");
                let fn1 = await this.awaitFn1();
                let fn2 = await this.awaitFn2();
                let fn3 = await this.awaitFn3();
                console.log(fn1, fn2, fn3);
                console.timeEnd("global");
            },

            awaitFn1() {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        console.log('awaitFn1');
                        resolve({
                            name: 'awaitFn1'
                        })
                    }, 1000);
                })
            },

            awaitFn2() {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        console.log('awaitFn2');
                        resolve({
                            name: 'awaitFn2'
                        })
                    }, 2000);
                })
            },

            awaitFn3() {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        console.log('awaitFn3');
                        resolve({
                            name: 'awaitFn3'
                        })
                    }, 3000);
                })
            },
        }
    }
</script>

<style lang="scss">

    .test-page {
        width: 100%;
        height: 100%;
        background-color: skyblue;
    }

    .test-box {
        width: 400px;
        height: 300px;
        background-color: rgba(#c82858, .3);
        @include position();

        .cc-box {
            width: 200px;
            height: 50px;
            background-color: #e4393c;
            @include position_center();
        }
    }
</style>